<template>
    <div>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside :width="isCollapse ? '65px' : '250px'">
                <div class="logo">
                    <img src="../assets/images/logo.f17d1107.png" />
                    <span v-show="!isCollapse">后台管理系统</span>
                </div>
                <el-menu router :default-active="$route.path" text-color="#fff" :collapse="isCollapse"
                    background-color="#001529" class="el-menu-demo">
                    <el-menu-item index="/index/home">
                        <i class="el-icon-s-home" style="font-size: 16px"></i>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="/index/staff">
                        <i class="el-icon-user-solid" style="font-size: 16px"></i>
                        <span>员工中心</span> </el-menu-item>
                    <el-menu-item index="/index/menu">
                        <i class="el-icon-menu" style="font-size: 16px"></i>
                        <span>菜单管理</span>
                    </el-menu-item>

                    <el-menu-item index="/index/order">
                        <i class="el-icon-s-order" style="font-size: 16px"></i>
                        <span>订单中心</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header height="80px">
                    <!-- 折叠菜单 -->
                    <div class="collapse" @click="isCollapse = !isCollapse" style="font-size: 22px;">
                        <i class="el-icon-s-unfold" v-if="!isCollapse"></i>
                        <i class="el-icon-s-fold" v-if="isCollapse"></i>
                    </div>
                    <el-dropdown @command="outLogin">
                        <span class="el-dropdown-link" style="font-size: 16px;">
                            {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="0">个人信息</el-dropdown-item>
                            <el-dropdown-item command="1">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dialog title="个人信息" :visible.sync="dialogVisible" width="30%">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="id" label="ID" width="180">
                            </el-table-column>
                            <el-table-column prop="user_name" label="姓名">
                            </el-table-column>
                            <el-table-column prop="user_level" label="职位">
                                <template slot-scope="scope">
                                    <el-tag>{{ scope.row.user_level | getLevel(scope.row.user_level) }}</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="dialogVisible = false">返回</el-button>
                        </span>
                    </el-dialog>
                </el-header>
                <el-main style="padding: 0;">
                    <!-- class="animate__animated animate__backInDown" -->
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userName: localStorage.getItem("user_name"),
            isCollapse: false,
            dialogVisible: false,
            tableData: [{
                id: '',
                user_name: '',
                user_level: ''
            }]
        }
    },
    methods: {
        outLogin(command) {
            if (Number(command)) {
                // 退出登录
                this.$confirm('确认退出登录么', '提示').then(_ => {
                    localStorage.removeItem('token')
                    this.$router.push('/')
                }).catch(_ => {
                    return
                })

            } else {
                // 个人信息
                let token = localStorage.getItem('token').split(".");
                let user = JSON.parse(decodeURIComponent(escape(window.atob(token[1]))))
                this.tableData[0] = user;
                this.dialogVisible = true
            }

        }
    },

}

</script>
<style lang="scss" scoped>
.el-aside {
    transition: .3s;
    height: 100vh;
    background-color: #001529;

    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80px;

        img {
            width: 55px;
            height: 40px;
        }

        span {
            margin-left: 10px;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
        }
    }

    // 去除右侧白框
    .el-menu-demo {
        border-right: none;
    }
}

.el-header {
    padding: 0 60px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
</style>
